<template>
	<page-body>
		<view class="page">
			<image :src='STATIC_URL+"guofang/36.png"' style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;"
				mode=""></image>
			<view class="flex benben-position-layout flex flex-wrap align-center honor_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub honor_fd0_0'>
					<view class='flex flex-wrap alig  n-center honor_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  honor_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='honor_fd0_0_c1_c0'>荣誉榜</text>
					</view>
					<view class='flex flex-wrap align-center justify-end honor_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center"
				style="z-index: 101; position: fixed;background-color: #98090b;">
				<benben-flex-tabs class-name='honor_benbenTabsfd1_0' v-model="tabLab" ref="benben_tabsfd1_0"
					select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='false'
					:top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0"
					@change="tabsChangeFunc()" v-if=" tabShow===true">
					<scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
						class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left="tabsInfofd1_0.moveX"
						scroll-with-animation="all .3s ease">
						<view class="benben-tabs-content" id="benben_tabsfd1_0-content">
							<view id="benben_tabsfd1_0-title"
								class="benben-tabs-title flex flex align-center justify-around">
								<template v-for='(item,key0) in tabs'>
									<view :key='key0'
										:class="{ 'checkTitlefd1_0': tabLab == item.aid, 'flex flex-wrap align-center justify-center honor_titlefd1_0_c3': true }"
										@tap="tabLab = item.aid" :id="`benben_tabsfd1_0-title-item-${item.aid}`">

										<text class='honor_titleItemfd1_0_c3_c0'>{{item.cat_name}}</text>

									</view>
								</template>
							</view>
							<view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
								id="benben_tabsfd1_0-line"
								class="benben-tabs-line flex benben-flex-tabs-line honor_linefd1_0"></view>
						</view>
					</scroll-view>

				</benben-flex-tabs>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<!--    <scroll-view :scroll-y="true" :show-scrollbar='true' :refresher-enabled='true' @refresherrefresh="getAjax"
        :refresher-triggered="isShow"> -->
			<view class="flex flex-wrap  justify-between benben-flex-layout honor_flex_2">
				<template v-for='(item,key0) in list' style="z-index: 100;">
					<view class='flex flex-wrap align-center honor_fd2_0' @tap.stop="handleJumpDiy"
						data-type="navigateTo"
						:data-url="`/pageguofang/honoDeta/honodetas/honodetas?aid=${item.aid}&name=${item.name}&imgurl=${item.thumb}`"
						:key='key0' style="z-index: 100;">
						<image class='honor_fd2_0_c0' mode="aspectFill" :src='item.thumb'></image>
						<view class='flex flex-wrap align-center justify-center flex-sub'>
							<text class='honor_fd2_0_c1_c0'>{{item.name}}</text>
						</view>
					</view>
				</template>
				<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
					:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			</view>
			<!-- </scroll-view> -->
			<!---flex布局flex布局结束-->
		</view>
	</page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],

		data() {
			return {
				"tabsInfofd1_0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0
				},
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"tabs": [],
				"tabLab": "",
				"tabShow": false,
				"list": [],
				isShow: false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.getyr6bde0be511ccFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.tabsChangeFunc()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getAjax() {
				var that = this;
				if (!that.isShow) {
					that.isShow = true;
					//下拉加载，先让其变true再变false才能关闭
					//关闭加载状态 ，需要一点延时才能关闭
					// this.get_banner_listFunc()
					// this.getmk6bda39629cbfFunc()
					this.tabsChangeFunc()
					setTimeout(() => {
						that.isShow = false;
					}, 200)
				}
			},
			//查询荣誉榜分类
			async getyr6bde0be511ccFunc() {
				//请求方法
				//数据验证

				let datatabs = await this.$api.get(global.apiUrls.post66bde0be511cc, {

				});

				if (datatabs.data.code != 1) {
					this.$message.info(datatabs.data.msg);
					return
				}
				let infotabs = datatabs.data;
				this.tabs = infotabs.data

				this.tabLab = this.tabs[0].aid;
				this.tabShow = true;
				this.minixPagingListsApi = global.apiUrls.post66bde0f1ed813;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					honorcate_id: this.tabLab
				}
				this.listData = [];
				this.list = this.listData;
				// this.list=[...this.list]

				this.pagingListToggle();

			},
			//tabs切换
			tabsChangeFunc() {
				this.minixPagingListsApi = global.apiUrls.post66bde0f1ed813;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					honorcate_id: this.tabLab
				}
				this.listData = [];
				this.list = this.listData;
				this.pagingListToggle();

			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		// overflow-x: hidden;
		min-height: 100vh;
		position: relative;
		// background: url(image-path('36.png')) no-repeat;
		// background-size: 100% 100%;
	}

	.honor_flex_0 {
		background: rgb(152, 9, 11);
		background-size: 100% auto;
		height: 100rpx;
		width: 100%;
		// padding: 66rpx 32rpx 0rpx 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000000000000000;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.honor_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: rgba(255, 232, 161, 1);
		line-height: 50rpx;
	}

	.honor_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: rgba(255, 232, 161, 1);
	}

	.honor_fd0_0_c0 {
		width: 120rpx;
	}

	.honor_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		color: rgba(255, 232, 161, 1);
	}

	.honor_titleItemfd1_0_c3_c0 {
		color: rgba(255, 232, 161, 1);
	}

	.honor_titlefd1_0_c3 {
		width: 220rpx;
		height: 71rpx;
	}

	.honor_linefd1_0 {
		width: 100rpx;
		height: 8rpx;
		top: 80rpx;
	}

	.checkTitlefd1_0 {
		font-weight: 700 !important;
		font-size: 28rpx !important;
		color: #333 !important;
		background: url(image-path('guofang/37.png')) no-repeat;
		background-size: 100% auto;
	}

	::v-deep .honor_benbenTabsfd1_0 {
		width: 750rpx;
		height: 90rpx;
		white-space: nowrap;
		text-align: center;
	}

	.honor_flex_2 {
		padding: 0 32rpx;
		margin-top: 100rpx;
		// background-color: red;
		height: 1420rpx;
		align-items: flex-start;
		z-index: 1000000000000000 !important;
		// overflow-y: auto;
	}

	.honor_fd2_0_c1_c0 {
		line-height: 45rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(255, 232, 161, 1);
	}

	.honor_fd2_0_c0 {
		width: 318rpx;
		height: 318rpx;
		border-radius: 16rpx;
	}

	.honor_fd2_0 {
		background: url(image-path('guofang/38.png')) no-repeat;
		width: 338rpx;
		height: 516rpx;
		background-size: 100% auto;
		padding: 90rpx 10rpx 0rpx 10rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}
</style>
